<template>
	<div>
		<el-card class="suggestion-con">



			<el-form :model="state.form" style="max-width: 600px">
				<el-form-item label="问题描述：">
					<el-input v-model="state.form.suggestion" type="textarea" />
				</el-form-item>
				<el-form-item label="您的姓名：">
					<el-input v-model="state.form.name" />
				</el-form-item>
				<el-form-item label="联系邮箱：">
					<el-input v-model="state.form.email" />
				</el-form-item>
				<el-form-item label="联系电话：">
					<el-input v-model="state.form.phone" />
				</el-form-item>
			</el-form>


			<el-row justify="center" class="mt30">
				<el-button type="primary" @click="submitSuggestion()">提交</el-button>
			</el-row>
		</el-card>
	</div>
</template>

<script setup lang="ts" name="suggestion">
import { reactive } from 'vue';
import router from '/@/router/index';
import {
	verifyPhone,
	verifyEmail,

} from '/@/utils/toolsValidate';
import { ElMessage } from 'element-plus';
import { useIndexApi } from '/@/api/index';
const state = reactive({
	form: {
		type: 5,
		suggestion: '',
		name: '',
		email: '',
		phone: '',
	}
});


async function submitSuggestion() {

	if (!state.form.suggestion) {
		ElMessage('请输入问题描述')
		return false;
	}
	if (!state.form.name) {
		ElMessage('请输入您的姓名')
		return false;
	}
	if (!verifyEmail(state.form.email)) {
		ElMessage('请输入联系邮箱')
		return false;
	}
	if (!verifyPhone(state.form.phone)) {
		ElMessage('请输入联系电话')
		return false;
	}
	const res = await useIndexApi().suggestion(state.form);
	if (res) {
		ElMessage('提交问题成功!');
		router.push({ path: '/question/list' })
	}

}


</script>

<style scoped lang="scss">
.suggestion-con {
	margin: 20px;
}
</style>
